<template>
	<view class="content">
		<!-- #ifdef H5 || APP-PLUS -->
		<view class="message-title">
			<commonTitle title="订单找回"></commonTitle>
		</view>
		<!-- #endif -->
		<view class="list-scroll-content">
			<view class="order-back-edit">
				<image src="../../static/common/order-back-01.png" class="order-back-bg"></image>
				<view class="order-back-block">
					<view class="order-back-title">请选择订单时间找回订单</view>
					<view class="small-text">（此处仅支持真实网购订单补录）</view>
					<!-- <input type="text" placeholder="请输入淘宝订单编号" class="order-back-input"/> -->
					<view class="order-back-input">
						<picker style="margin-right: 20upx;" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
								<view class="uni-input">{{date}}</view>
						</picker>
						<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
							<view class="uni-input">{{time}}</view>
						</picker>
					</view>
					<!-- <view class="order-back-input">
						<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
							<view class="uni-input">{{time}}</view>
						</picker>
					</view> -->
					
					<image src="../../static/common/order-back-btn.png" class="order-back-btn" @tap="orderBack"></image>
				</view>
			</view>
			<image src="../../static/common/order-back-step.png" class="order-back-step"></image>
			<view class="step">
				一·点击<text class="color-pink">「进入淘宝」 </text> 订单按钮，进入淘宝
				<text class="color-pink">「我的订单」</text>        
			</view>
			<image src="../../static/common/order-back-step-01.png" class="order-back-setp-01"></image>
			<view class="step">
				二·在<text class="color-pink">「我的订单」 </text> 中找到丢失的订单，点击进入
				<text class="color-pink">「订单详情」</text>        
			</view>
			<image src="../../static/common/order-back-setp-02.png" class="order-back-setp-01"></image>
			<view class="step">
				三·在<text class="color-pink">「订单详情」 </text> 中复制订单编号
			</view>
			<image src="../../static/common/order-back-setp-03.png" class="order-back-setp-01"></image>
			<view class="Be-careful">注意：如果未安装淘宝APP，商品详情页以网页形式展示，无法一键复制订单编号</view>
		</view>
		
		<!-- 订单补录 -->
		<uni-popup ref="shoModel" :type="type">
			<view class="uni-share">
				<view class="tip-block">
					<view class="title">温馨提示</view>
					<view class="msg">超级返订单通过此位置补录无效，请在超级返订单位置补录若有疑问，微信联系：XXXXXX</view>
					<view class="commit-btn" @tap="cancel('share')">确认</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import commonTitle from'../../components/titile/title.vue'
	import uniPopup  from'../../components/uni-popup/uni-popup.vue'
	export default{
		components:{
			commonTitle,
			uniPopup
		},
		data () {
			const currentDate = this.getDate({
					format: true
			})
			return {
				date: currentDate,
				time: '08:00',
				apptoken:"",
				type:"center",
				kefu:""
			}
		},
		computed: {
			startDate() {
					return this.getDate('start');
			},
			endDate() {
					return this.getDate('end');
			}
		},
		onLoad() {
			this.apptoken = uni.getStorageSync("apptoken");
			this.kefu = uni.getStorageSync("kefu");
			const _this = this;
			setTimeout(function(){
				_this.makeTip();
			},500)
		},
		methods: {
			makeTip(){
				uni.showModal({
					title:"温馨提示",
					content:'此处仅支持真实购物订单补录，请勿将礼品单订单编号复制到此处，补录之前仔细核对，以免造成佣金损失，如有疑问，微信联系：'+this.kefu.weixin,
				})
			},
			bindTimeChange(e) {
					this.time = e.target.value
			},
			bindDateChange(e) {
					this.date = e.target.value
			},
		  getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
						year = year - 60;
				} else if (type === 'end') {
						year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			orderBack(){
				//订单补录
				console.log(this.date)
				const _this = this;
				//1.将用户选择的时间转化为时间戳
				const date = new Date(this.date);
				const  time1 = date.getTime();
				//2.获取当前时间的时间戳
				const time2 =new Date().getTime();
				//3.对比两个时间戳，判断用户选择的日期是否有效
				if(time1 - time2>0){
					this.$CommonJS.showToast("请选择有效日期")
				}else{
					//this.$CommonJS.showToast("申请成功")
					uni.request({
						url:this.$API.URL + this.$API.orderAdd,
						data:{
							apptoken:this.apptoken,
							startTime:this.date +' ' + this.time +":00"
						},
						success(res) {
							console.log(res)
							if(res.data.success){
								_this.$CommonJS.showToast(res.data.msg)
							}
						}
					})
				}
			},
			cancel(type) {
				this.$refs['show' + type].close();
			},
		}
		
	}
</script>

<style>
	@import url("order-back.css");
</style>
